<template>
    <div>
        <!-- 头部组件 -->
    <van-nav-bar title="影院"  fixed placeholder >
    <template #left>
        <van-icon class="iconfont icon-search" />
    </template>
    <template #right>
        <van-icon class="iconfont icon-search" />
    </template>
    </van-nav-bar>
        <!-- 下拉选择框 -->
    <van-dropdown-menu id="dropdown_menu" >
        <van-dropdown-item ref="dropdown" :title="title" >
            <div class="adress">
                <div v-for="item in OptionData()" :key="item.value" class="adress_name">
                    <span :class="item.select?'active':''" @click="changAdress(item.text)">{{item.text}}</span>
                </div>
            </div>
        </van-dropdown-item>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>

    <van-list
    v-model="loading"
    :finished="finished"
    @load="onLoad"
    class="cinema_list"
    >
    <div v-for="item in districtName" :key="item" :title="item.name" class="cinema" @click="handOnClick(item.cinemaId)">
        <div class="left">
             <div class="cinema_name">{{item.name}}</div>
             <div class="cinema_adress">{{item.address}}</div>
        </div>
        <div class="right">
            <div class="cinema_lowPrice">￥<span>{{item.lowPrice/100}}</span>起</div>
            <div class="cinema_gpsAddress">距离未知</div>
        </div>
    </div>
</van-list>
    </div>
</template>

<script>
export default {
  data () {
    return {
      title: '全城',
      value2: 'a',
      value3: 'A',
      option2: [
        { text: 'APP订票', value: 'a' },
        { text: '前台兑换', value: 'b' }
      ],
      option3: [
        { text: '最近去过', value: 'A' },
        { text: '离我最近', value: 'B' }
      ],
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    changAdress (data) {
      this.title = data
      this.OptionData(data)

      this.$refs.dropdown.toggle()
    },
    handOnClick (id) {
      this.$router.push({ name: 'cinema', params: { id: id, location: window.location.pathname } })
    }
  },
  mounted () {
    this.$store.dispatch('getAxiosData', {
      url: `https://m.maizuo.com/gateway?cityId=${this.$store.state.city.cityId}&ticketFlag=1`,
      host: 'mall.film-ticket.cinema.list',
      fun: 'cinemaData'
    })
  },
  computed: {
    districtName () {
      return this.$store.state.cinemaList.filter(item => {
        if (this.title === '全城') {
          return item
        }
        return item.districtName === this.title
      })
    },
    OptionData () {
      return (data) => {
        if (data) {
          console.log('jijijij')
          return this.OptionData().forEach(item => {
            item.select = false
            if (item.text === data) {
              console.log('123123')
              item.select = true
            }
          })
        } else {
          let num = 1
          const option = [
            { text: '全城', value: 0, select: true }
          ]
          var arr = []
          this.$store.state.cinemaList.forEach(item => {
            if (arr.indexOf(item.districtName) === -1) {
              arr.push(item.districtName)
              option.push({ text: item.districtName, value: num++ })
            }
          })
          return option
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema_list{
    margin-top: 50px;
padding: 12px ;
.cinema{
    display: flex;
    font-size: 12px;
    color: #666;
    padding: 10px 0;
    .left{
        flex: 8;
        padding-right: 20px;
        .cinema_name{
            font-size: 15px;
            margin-bottom: 5px;
        }
        .cinema_adress{
            width: 267px;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
        }
    }
    .right{
        flex: 2;
        text-align: center;
        .cinema_lowPrice{
            color: rgb(255, 95, 22);
            margin-bottom: 5px;
            span{
                font-size: 16px;
                padding: 0 2px 1px;
            }
        }
    }
    border-bottom: 1px solid #eee;
}
}
#dropdown_menu{
    width: 100%;
    position: fixed;
}
.adress{
    width: 100%;
    text-align: center;
    padding: 5px 0;
    overflow: hidden;
    .adress_name{
        margin: 3px 0;
        float: left;
        width: 25%;
        box-sizing: border-box;
        padding:  5px;
        span{
        display: block;
        padding: 6px 0;
        font-size: 12px;
        color: #666;
        border: 1px solid #eee;
        }
        .active{
            color: red;
             border: 1px solid red;
        }
    }
}
</style>
